<template>
  <div class="main">
      <!-- 左侧导航 -->
      <div class="left" :style="{width:(!isCollapse?'200px':'auto')}">
          <div class="logo">管理</div>
              <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#2b333e"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      :collapse="isCollapse">
        <el-menu-item index="/home/welcome">
        <i class="el-icon-s-order"></i>
        <span slot="title">主页</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span>账号管理</span>
        </template>
        <el-menu-item index="/home/users">用户管理</el-menu-item>
        <el-menu-item index="1-2">其他</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>权限管理</span>
        </template>
        <el-menu-item index="2-1">权限管理</el-menu-item>
      </el-submenu>
    </el-menu>
      </div>
      <!-- end左侧导航 -->
      <!-- 右侧内容 -->
      <div class="right">
          <!-- 顶部导航 -->
          <div class="nav">
              <div class="icon" @click="isCollapse=!isCollapse">
                <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" ></i>
              </div>
          <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#2b333e"
          text-color="#fff"
          router
          active-text-color="#ffd04b">
              <el-menu-item index="1"><i class="el-icon-chat-dot-square"></i>信息</el-menu-item>
              <el-menu-item index="2"><i class="el-icon-message"></i>邮箱</el-menu-item>
              <el-submenu index="4">
                <template slot="title"><i class="el-icon-s-custom"></i>管理员</template>
                <el-menu-item index="4-1">个人中心</el-menu-item>
                <el-menu-item index="/home/changepassword">修改密码</el-menu-item>
                <el-menu-item index="4-3" @click="logout">退出</el-menu-item>
              </el-submenu>
          </el-menu>
          </div>
          <!-- end顶部导航 -->
          <!-- 内容区域 -->
          <div class="content">
            <router-view></router-view>
          </div>
      </div>
  </div>
</template>

<script>

export default {
    data(){
        return{
            activeIndex2: '1',
            isCollapse: false,
        };  
    },
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push("login");
        },
        handleOpen(key, keyPath) {
        console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
    }
}
</script>

<style lang="less" scoped>
.main{
    width: 100vw;
    height: 100vh;
    display: flex;
    .left{
        width:200px;
        background-color: #2b333e;
        .logo{
            width: 90%;
            color: white;
            font-size: 18px;
            text-align: center;
            padding: 10px 0;
            border:1px solid white;
            margin: 10px auto;
        }
    }
    .right{
        flex: 1;
        .nav{
            height: 60px;
            display: flex;
            justify-content: space-between;
            background-color:#2b333e ;
            align-items: center;
            .icon{
              padding-left: 5px;
              i{
                color: white;
                font-size: 20px;
              }
            }
        }
        .content{
            padding: 15px;
        }
    }
}

</style>